<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <div class="bg-dark">
    <nav class="navbar navbar-expand-lg navbar-dark container">
      <a class="navbar-brand" href="./">
        <img src="./images/logo.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto my-menu">
          <li class="nav-item active ">
            <a class="nav-link" data-type="All" href="javascript:void(0)">推荐</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </div>

  <div class="container my-content">
    <div class="row">
      <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12">
        <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner my-banner active">
            <!--          <div class="carousel-item active">
            <img src="./images/pic1.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>-->
          </div>
          <button class="carousel-control-prev my-prev" type="button" data-target="#carouselExampleCaptions"
            data-slide="prev">
            <svg t="1625410614287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4200" width="60" height="60">
              <path
                d="M268.240896 506.35712C251.91968 528.79872 251.91968 559.20128 268.240896 581.64288L524.240896 933.64288C545.030528 962.22848 585.057216 968.54848 613.643008 947.75936 642.228736 926.9696 648.548736 886.94272 627.759104 858.35712L399.25472 543.8368 627.759104 229.64288C648.548736 201.05728 642.228736 161.0304 613.643008 140.24064 585.057216 119.45152 545.030528 125.77152 524.240896 154.35712L268.240896 506.35712Z"
                fill="#A5A9AA" p-id="4201"></path>
            </svg>
          </button>
          <button class="carousel-control-next my-next" type="button" data-target="#carouselExampleCaptions"
            data-slide="next">
            <svg t="1625410655287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6972" width="60" height="60">
              <path
                d="M624.827008 544.0512 396.240896 858.35712C375.451264 886.94272 381.771264 926.9696 410.356992 947.75936 438.942784 968.54848 478.969472 962.22848 499.759104 933.64288L755.759104 581.64288C772.08032 559.20128 772.08032 528.79872 755.759104 506.35712L499.759104 154.35712C478.969472 125.77152 438.942784 119.45152 410.356992 140.24064 381.771264 161.0304 375.451264 201.05728 396.240896 229.64288L624.827008 544.0512Z"
                fill="#A5A9AA" p-id="6973"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
        <div class="right">
          <div class="media">
            <a href="javascript:void(0)">
              <span></span>
            </a>

            <div class="media-overlay p-4 ">
              <div class="text-center">
                <span>20</span>
                <div class="time">3月,2020</div>

              </div>
            </div>

            <div class="list-content p-4">
              <div class="list-body">
                <a href="javascript:void(0)">妹子图 <span></span></a>
              </div>

              <div class="list-footer">
                <div class="text">
                  <span>Random Girl</span>
                </div>

                <div class="right">
                  <a href="javascript:void(0)" class="suiji">
                    <i><svg t="1625283289790" class="icon" viewBox="0 0 1040 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2112" width="20" height="20">
                        <path
                          d="M925.104 209.296l-56.4 44.112C791.808 155.104 672.208 92 537.904 92c-231.904 0-419.6 187.504-419.904 419.504C117.696 743.68 305.808 932 537.904 932c181.296 0 335.792-115.008 394.592-276.096a8.016 8.016 0 0 0-4.896-10.304l-56.704-19.504a8 8 0 0 0-10.096 4.8 271.2 271.2 0 0 1-5.904 14.896 342.16 342.16 0 0 1-73.696 109.408 344.768 344.768 0 0 1-109.296 73.792A341.76 341.76 0 0 1 538.08 856c-46.496 0-91.488-9.104-133.792-27.008a341.488 341.488 0 0 1-109.296-73.792 342.16 342.16 0 0 1-73.712-109.408 342.24 342.24 0 0 1-26.992-133.888c0-46.512 9.104-91.504 26.992-133.904a342.16 342.16 0 0 1 73.712-109.392 344.768 344.768 0 0 1 109.28-73.808 341.76 341.76 0 0 1 133.808-27.008c46.512 0 91.504 9.12 133.808 27.008a341.488 341.488 0 0 1 109.296 73.808c9.904 9.888 19.2 20.384 27.792 31.392L748.8 347.008a8 8 0 0 0 3.008 14.08l175.584 43.008a8.032 8.032 0 0 0 9.92-7.696l0.8-180.896a8.064 8.064 0 0 0-13.008-6.208z"
                          fill="#ffffff" p-id="2113"></path>
                      </svg></i>
                  </a>
                </div>
              </div>
            </div>

          </div>



        </div>
      </div>
    </div>

    <div class="row my-list">
      <!--<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <div class="card">
        <img src="./images/pic3.webp" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>-->
    </div>
  </div>


  <nav aria-label="Page navigation example" class="container">
    <ul class="pagination my-more">
      <li class="page-item prev-page">
        <a class="page-link " href="#" aria-label="Previous">
          <span aria-hidden="true">上一页</span>
        </a>
      </li>
      <li class="page-item next-page">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">下一页</span>
        </a>
      </li>
    </ul>
  </nav>


  <script src="./js/index.js"></script>
</body>

</html>